<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<!-- header -->
		<%@ include file="/WEB-INF/views/include/header.jsp"%>
		<%--<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PCTEzZVCWLNzwkThNtrmMwlQrPyKosvT"></script>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>--%>
		
		<style>
			html{
				background: #232734;
			}
			.team-container {
				padding: 8px 20px 24px;
				background-color: #232734;
			}
				#gxd .box3 {
				  padding-top: 10px;
				  cursor: pointer;
				  height: 100px;
				  font-size: 18px;
				  text-align: center;
				  border-radius: 10px;
				  color: #fff;
				  background-color: #c9c9c9;
				  box-shadow: 0 4px 0 #b9b8b8;
				}
				#gxd .box3.active {
				  background-color: #56d7ab;
				  box-shadow: 0 4px 0 #5bc7a2;
				}
				#gxd .box3 .title {
				  font-size: 24px;
				}
				#gxd .box3 .box-content {
				  position: relative;
				  width: 50%;
				}
				#gxd .box3 .box-content .box-text {
				  position: absolute;
				  font-size: 16px;
				  width: 100%;
				  top: 38%;
				}
				#gxd .box3 .box-chart {
				  height: 155px;
				}
				body {
					background-color: #fff;
				}
				.shadow-box {
					border-radius: 8px;
					box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
					margin-bottom:18px;
				}
                #excel-export{
                    position: relative;
                    display: inline-block;
                    left: 10px;
                    width: 120px;
                    height: 40px;
                    line-height: 40px;
                    border-radius: 5px;
                    font-size: 16px;
                    text-align: center;
                    background:#56d7ab;
                    color: #ffffff;
                    cursor: pointer;
                }
                #select-time{
                    width: 100px;
                }
				.input-group-addon{
					position: relative;
					left: -25px;
					padding-bottom: 11px;
				}
</style>
	</head>
	<body class="no-skin">
	<div class="team-container">
	<script type="text/javascript">
				try{ace.settings.check('main-container' , 'fixed')}catch(e){}
	</script>
	<div class="row" id="gxd" style="margin-bottom:20px;">
	    <div class="col-xs-4 box-container">
	        <div class="box3 clearfix active">
	            <p class="title">专业招商小分队</p>
	          <%--  <div class="box-content pull-left">
	                <p>大项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="zy-d"></div>
	            </div>
	            <div class="box-content pull-right">
	                <p>好项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="zy-h"></div>
	            </div>--%>
	        </div>
	    </div>
	    <div class="col-xs-4 box-container">
	        <div class="box3 clearfix">
	            <p class="title">乡镇招商小分队</p>
	          <%--  <div class="box-content pull-left">
	                <p>大项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="xz-d"></div>
	            </div>
	            <div class="box-content pull-right">
	                <p>好项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="xz-h"></div>
	            </div>--%>
	        </div>
	    </div>
	    <div class="col-xs-4 box-container">
	        <div class="box3 clearfix">
	            <p class="title">有关责任单位</p>
	          <%--  <div class="box-content pull-left">
	                <p>大项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="yg-d"></div>
	            </div>
	            <div class="box-content pull-right">
	                <p>好项目</p>
	                <p class="box-text">完成率</p>
	                <div class="box-chart" id="yg-h"></div>
	            </div>--%>
	        </div>
	    </div>
	</div>
		<%--
        <div class="row clearfix">
            <div class="col-md-12 column shadow-box">
                <div id="bigteam" style="width: 100%;height:600px;"></div>
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column shadow-box">
                 <div id="goodteam" style="width: 100%;height:600px;"></div>
            </div>
        </div>  --%>
		<div class="container-head">
            <a id="dlink" style="display:none;"></a>
            <div id="excel-export" title="暂不支持IE浏览器下载">Excel导出</div>
			<label class="col-sm-1 control-label no-padding-right"  id="report-label" style="color:#fff;line-height: 35px;" >选择月份</label>
			<div class="col-sm-2" style="color:#fff">
				<input type="text" id="city-data" class="form-control data-picker"  readonly style="display: inline-block" />
			</div>
			<div class="col-sm-1">
				<span class="input-group-addon"><i class="fa fa-calendar bigger-110"></i></span>
			</div>
        </div>
		<div class="row clearfix">
			<div class="col-md-12 column shadow-box" >
				<div class="row" >
					<div class="page-content" >
						<!-- PAGE CONTENT BEGINS -->
						<!-- jqGrid表格 -->
						<table id="gridTable"></table>
						<!-- PAGE CONTENT ENDS -->
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div>
		</div>

</div>
		<script src="<s:url value="/assets/dist/js/echarts.min.js"></s:url>"></script>
		<script src="<s:url value="/assets/dist/js/excelExport.js"></s:url>"></script>
		<%@ include file="/WEB-INF/views/include/footer.jsp"%>
		<script type="text/javascript">
		//基本路径
		var baseUrl = "<s:url value="/team/teamrank/rank"></s:url>/"
		
		//jqgrid的表格高度
		var height = 320;
		//jqgrid表格行头的中文
		var colNames = ['排名','小组名称','大项目任务数','大项目完成数','大项目完成率','大项目完成分','大项目投资额贡献分','大项目项目数贡献分','生效率得分',
			'好项目任务数','好项目完成数','好项目完成率','好项目完成分','好项目投资额贡献分','好项目项目数贡献分','总得分'];
		//jqgrid表格中每一行的信息模型
		var colModel = [
			//{name:'sysId', width:0, hidden: true,key:true},
            {name:'rank',projectname:'rank',width:48,editable: true},
			{name:'teamname',projectname:'teamn ame',width:180,editable: true},

			{name:'bigplan',projectname:'bigplan',width:90,editable: true},
			{name:'bigfinish',projectname:'bigfinish',width:90,editable: true},
			{name:'bigratio',projectname:'bigratio',width:100,editable: true},
            {name:'bigRatioScore',projectname:'bigRatioScore',width:100,editable: true},
            {name:'bigInverScore',projectname:'bigInverScore',width:125,editable: true},
            {name:'bigNumScore',projectname:'bigNumScore',width:125,editable: true},
			{name:'capitalScore',projectname:'capitalScore',width:125,editable:true},

			{name:'goodplan',projectname:'goodplan',width:90,editable: true},
			{name:'goodfinish',projectname:'goodfinish',width:90,editable: true},
			{name:'goodratio' ,projectname:'goodratio', width:100,editable: true},
            {name:'goodRaitoScore' ,projectname:'goodRaitoScore', width:100,editable: true},
            {name:'goodInverScore',projectname:'goodInverScore',width:125,editable: true},
            {name:'goodNumScore',projectname:'goodNumScore',width:125,editable: true},
            {name:'score',projectname:'score',width:150,editable: true},
			
		                      
		];
		
		//jqgrid的具体执行方法
		jqgrid({
			shrinkToFit:false,
            rowNum:100,
			gridTableId : "#gridTable",
			gridPagerId : "#gridPager",
            multiselect :false,
            loadui:"Disable"
		});

        /**
         * 折线图 和 柱状图
         */
        function ZxtAndZzt(option) {
            this.arrData1 = option.arrData1;
            this.arrData2 = option.arrData2;
            this.arrData3 = option.arrData3;
            this.el = option.el;
        }
        ZxtAndZzt.prototype.init=function()
        {
            var _this = this;
            var options = {
                title : {
                    text: '各小队大项目完成情况',
                    // subtext: '数据来源招商办',
                    textStyle:{
                        color:'#fff'
                    }
                },
                tooltip : {
                    trigger: 'axis'
                },
                label:{
                    show:true,
                    position:'top'
                },
                legend: {
                    data:['任务数','完成数'],
                    textStyle:{
                        color:'#fff'
                    }
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                yAxis : [
                    {
                        type : 'value',
                        boundaryGap : [0, 0.01],
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    }
                ],
                grid: { // 控制图的大小，调整下面这些值就可以,
                    x2: 100,
                    y2: 200,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                xAxis : [
                    {
                        type : 'category',
                        data : _this.arrData1,//['巴西','印尼','美国','印度','中国','世界人口(万)'],
                        axisLabel: {
                            interval: 0,
                            formatter:function(value)
                            {
                                return value.split("").join("\n");
                            },
                            fontSize: '16',
                            color: '#fff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                    }
                ],
                series : [
                    {
                        name:'任务数',
                        type:'line',
                        data:  _this.arrData2, //[18203, 23489, 29034, 104970, 131744, 630230],
                        itemStyle:{
                            color:'#14aaff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        areaStyle: {
                            normal:{
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#11b8ff'
                                },{
                                    offset: 0.5,
                                    color: '#24ddf3'
                                },{
                                    offset: 1,
                                    color: 'rgba(0,0,0,0)'
                                }])

                            }}
                    },
                    {
                        name:'完成数',
                        type:'line',
                        data:_this.arrData3, //[19325, 23438, 31000, 121594, 134141, 681807],
                        itemStyle:{
                            color:'#4aff72'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        areaStyle: {
                            normal:{
                                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#20D7E2'
                                },{
                                    offset: 0.5,
                                    color: '#50e9f3'
                                },{
                                    offset: 1,
                                    color: 'rgba(0,0,0,0)'
                                }])

                            }}
                    }

                ]
            };

            var _ec =echarts.init(document.getElementById(_this.el));
            _ec.setOption(options);
             window.addEventListener('resize',function() {
            _ec.resize();
            })
            return _ec;
        }
        /**  -------完成情况图表加载事件  -----
         **/
    function queryWCQK(url,jsondata,el)
    {
        $.ajax({
            type : "POST",
            url : url,
            dataType : "json", //返回数据形式为json
            contentType:'application/json;charset=UTF-8',
            data:JSON.stringify(jsondata),
            success:function(result) {
                if (result) {
                    //alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
                    //将返回的category和series对象赋值给options对象内的category和series
                    //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                    var option ={
                        arrData1:result.data.category,
                        arrData2:result.data.series[0].data,
                        arrData3:result.data.series[1].data,
                        el:el
                    }
                    new ZxtAndZzt(option).init();


                }
            },
            error : function(errorMsg) {
                alert("图表请求数据失败啦!");
            }
        });
    }
    /** 选择框改变事件 —**/



   // queryWCQK('/chart/show/bigteam',{"teamClass": "专业"},'bigteam');  //默认先查询专业小分队的图表。
   // queryWCQK('/chart/show/goodteam',{"teamClass": "专业"},'goodteam');//默认先查询专业小分队的图表。

			  /* $.ajax({
	                type : "POST",
	                url : "/chart/show/bigteam",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify({"teamClass": "专业"}),
	                success:function(result) {
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                            var option ={
                                arrData1:result.data.category,
                                arrData2:result.data.series[0].data,
                                arrData3:result.data.series[1].data,
                                el:'bigteam'
                            }
                            new ZxtAndZzt(option).init();


	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });
*/
			 /*  $.ajax({
	                type : "POST",
	                url : "/chart/show/goodteam",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify({"teamClass": "专业"}),
	                success:function(result) {
	                	
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
                            var option ={
                                arrData1:result.data.category,
                                arrData2:result.data.series[0].data,
                                arrData3:result.data.series[1].data,
                                el:'goodteam'
                            }
                            new ZxtAndZzt(option).init();

	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });*/
			   
			//
				function Pie(option) {
			    this.num1 = option.num1;
			    this.num2 = option.num2;
			    this.rate = option.rate;
			    this.el = option.el;
			}
			Pie.prototype.init = function() {
			    var _this = this;
			    var option = {
			        series: [
			            {
			                name:'总完成情况',
			                type:'pie',
			                radius: ['85%', '90%'],
			                avoidLabelOverlap: false,
			                label: {
			                    normal: {
			                        show: false,
			                        position: 'center',
			                    },
			                },
			                labelLine: {
			                    normal: {
			                        show: false
			                    }
			                },
			                data:[
			                    {
			                        value: _this.num2,
			                        name: _this.rate+'%',
			                        label: {
			                            normal: {
			                                show: true,
			                                textStyle: {
			                                    color: '#fff',
			                                    fontSize: '30',
			                                }
			                            }
			                        },
			                        itemStyle: {
			                            color: '#fff',
			                            shadowBlur: 10,
			                            shadowColor: '#fff'
			                        }
			
			                    },
			                    {
			                        value: _this.num1,
			                        name:'完成',
			                        itemStyle: {
			                            color: 'rgba(0,0,0,0)',
			                        }
			                    },
			                ]
			            }
			        ]
			    };
			
			    var _ec = echarts.init(document.getElementById(_this.el));
			    _ec.setOption(option);
			    window.addEventListener('resize', function() {
			        _ec.resize();
			    })
			}


	/*	$.ajax({
	                type : "post",
	                url : "/chart/show/eachTeamRate",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify({'datatime':"2018"}),
	                success:function(result) {

	                   // console.log(result);
	                    if (result) {
	                    	//alert(result.data.category+"  "+result.data.series[0].data+"  "+result.data.legend);
	                        //将返回的category和series对象赋值给options对象内的category和series
	                        //因为xAxis是一个数组 这里需要是xAxis[i]的形式
							//alert(result.data.category);
	                        //---
								var op4 = {
									num1: result.data.zy.bigplan ,//
									num2: result.data.zy.bigfinish,//
									rate: result.data.zy.bigrate,//完成率
									el: 'zy-d'
								};
								
								var pie1 = new Pie(op4);
								pie1.init();
								
								var op5 = {
									num1: result.data.zy.goodplan ,//
									num2: result.data.zy.goodfinish,//
									rate: result.data.zy.goodrate,
									el: 'zy-h'
								};
								
								var pie2 = new Pie(op5);
								pie2.init();
								
								var op6 = {
									num1: result.data.xz.bigplan ,//
									num2: result.data.xz.bigfinish,//
									rate: result.data.xz.bigrate,
									el: 'xz-d'
								};
								
								var pie3 = new Pie(op6);
								pie3.init();
								
								var op7 = {
									num1: result.data.xz.goodplan ,//
									num2: result.data.xz.goodfinish,//
									rate: result.data.xz.goodrate,
									el: 'xz-h'
								};
								
								var pie4 = new Pie(op7);
								pie4.init();
								
								var op8 = {
									num1: result.data.bm.bigplan ,//
									num2: result.data.bm.bigfinish,//
									rate: result.data.bm.bigrate,
									el: 'yg-d'
								};
								
								var pie5 = new Pie(op8);
								pie5.init();
								
								var op9 = {
									num1: result.data.bm.goodplan ,//
									num2: result.data.bm.goodfinish,//
									rate: result.data.bm.goodrate,
									el: 'yg-h'
								};
								
								var pie6 = new Pie(op9);
								pie6.init();
							
							
							///---
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });*/

        var teamclass ='专业';
			var nowIndex = 0;
			$('#gxd').on('click', '.box3', function() {
			    var clickIndex = $(this).parent('.box-container').index();
			    // 如果点击当前则返回
			    if(nowIndex == clickIndex) {
			        return;
			    }
			    $('#gxd .box3').removeClass('active');
			    $(this).addClass('active');
			    nowIndex = clickIndex;
			    // 根据nowIndex去做不同处理

			    if(nowIndex ==0){
			    	teamclass ='专业';
			    }
				if(nowIndex ==1){
					teamclass ='乡镇';
				}
				if(nowIndex==2) {
					teamclass ='部门';
				}
				//alert(teamclass);
				var teamcla = {'teamClass' : teamclass,'datatime':'2018'};
				//(teamcla);
				
				query(teamcla);
               // queryWCQK('/chart/show/bigteam',teamcla,'bigteam');
               // queryWCQK('/chart/show/goodteam',teamcla,'goodteam');

				/*  $.ajax({
	                type : "POST",
	                url : "/chart/show/goodteam",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify(teamcla),
	                success:function(result) {
	                    if (result) {

                            var option ={
                                arrData1:result.data.category,
                                arrData2:result.data.series[0].data,
                                arrData3:result.data.series[1].data,
                                el:'goodteam'
                            }
                            new ZxtAndZzt(option).init();
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });*/
				
				  /* $.ajax({
	                type : "POST",
	                url : "/chart/show/bigteam",
	                dataType : "json", //返回数据形式为json
	                contentType:'application/json;charset=UTF-8',
	                data:JSON.stringify(teamcla),
	                success:function(result) {
	                    if (result) {
                            var option ={
                                arrData1:result.data.category,
                                arrData2:result.data.series[0].data,
                                arrData3:result.data.series[1].data,
                                el:'bigteam'
                            }
                            new ZxtAndZzt(option).init();
	                    }
	                },
	                error : function(errorMsg) {
	                    alert("图表请求数据失败啦!");
	                }
	            });*/

			   // console.log(nowIndex);
			});


        function  mychange() {
            var selecttime =$('#select-time option:selected').val()
            var  teamcla = {'teamClass' : teamclass,'datatime':'2018','selectTime':selecttime};
           // console.log(teamcla);
            query(teamcla);
        }
			   
			 function query(teamclass) {
                 var postData = appendPostDataJson("#gridTable", teamclass);
                 seachJqgirdData("#gridTable", postData);
             }
             //excel export点击事件
            $(function () {
                $('#excel-export').on('click',function () {
                  tableToExcel('gview_gridTable', '小分队', ' 小分队考核排名表.xls')
                })
            })

        jQuery(function($) {
            $('.data-picker').datepicker({
                inline: true,
                format:"yyyymm",
                autoclose: true,
                todayHighlight: true,
                startView: 'months', //开始视图层，为月视图层
                maxViewMode:'years', //最大视图层，为年视图层
                minViewMode:'months', //最小视图层，为月视图层
                language: 'cn'
            })
            //show datepicker when clicking on the icon
                .next().on(ace.click_event, function(  ){
                $(this).prev().focus();
            })

           $('.data-picker')
                .datepicker()
                .on('changeDate', function(ev){

					var  date =	$("#city-data").val();
					//alert(date);
                    var  teamcla = {'teamClass' : teamclass,'datatime':'2018','selectTime':date};
                    console.log(date+"sdfsdfsdfsdfs");
                    query(teamcla);
                });

        });

	/*	//日期
			$(function () {
                $('#monthly').monthpicker({
                    years: [2020, 2019, 2018, 2017, 2016],
                    topOffset: 6,
                    onMonthSelect: function (m, y) {
                        console.log('Month: ' + m + ', year: ' + y);
						m=m+1;
                        if(m<10){
                           m='0'+m;
						}
						console.log(m);
                        var date=String(y)+String(m);


                        var  teamcla = {'teamClass' : teamclass,'datatime':'2018','selectTime':date};
                        // console.log(teamcla);
                        query(teamcla);
                    }
                })
            })*/
		</script>
	</body>
</html>